<!DOCTYPE html>
<html lang="zh">
<head>
<title>商品列表</title>
<{include file="public/header" /}>

  <style>
    #list{
      overflow: auto;
      height: 700px;
    }
    body {
      height: auto;
      background: whitesmoke;
    }
    .proimg>img{
      max-width: 100%;
    }
    .protxt>.name{
      min-height: 40px;
    }
  </style>
</head>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header fixed-top'>
  <div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" value="" name="keyword" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required>
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
        <i class="weui-icon-search"></i>
        <span>搜索您想要的商品</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>
  <div class="pro-sort">
    <div class="weui-flex">
      <div class="weui-flex__item"><div class="placeholder NormalCss sort-item" onclick="setSort('normal',this)">综合</div></div>
      <div class="weui-flex__item"><div class="placeholder  sort-item" onclick="setSort('sale',this)">按销量</div></div>
      <div class="weui-flex__item"><div class="placeholder  sort-item" onclick="setSort('price',this)">按价格</div></div>
    </div>
  </div>
</header>
<!--主体-->
<div class="weui-content" style="padding-top:85px;">

  <div class="wy-Module goods-list" style="display: block">

    <div class="wy-Module-con">
      <ul class="wy-pro-list clear"></ul>
    </div>
  </div>
  <div class="to_top" style="display: none">
    <img src="/static/mall/images/icon_to_top.png" alt="返回顶部" style="max-width: 100%" >
  </div>

</div>


<{include file="public/footer" /}>
<script>
  var cpage = 1;
  var st = 1;
  var category_id= bs_get_param('category_id');
  var sort = 'normal';
  var store_num = bs_get_param('store_num');
  var keyword = bs_get_param('keyword');
  if (keyword){
    $("#searchInput").val(keyword)
  }
  function load_data(){
    if (st==0){
      return ;
    }
    var keyword = $("#searchInput").val();
    bs_request("<{:url('/mall/goods/goods_list')}>",{page:cpage,keyword:keyword,category_id:category_id,sort:sort,store_num:store_num},function (res) {


      if (res.code==0 && res.data.goods.length>0) {

        for (var i = 0; i < res.data.goods.length; i++) {
          $(".wy-pro-list").append('<li>\n' +
                  '          <a class="goods-item" href="<{:url(\'/mall/goods/detail\')}>?id='+res.data.goods[i].id+'">\n' +
                  '            <div class="proimg"><img src="'+res.data.goods[i].thumb+'" alt=""></div>\n' +
                  '            <div class="protxt">\n' +
                  '              <div class="name">'+res.data.goods[i].title+'</div>\n' +
                  '              <div class="wy-pro-pri">¥<span>'+res.data.goods[i].price+'</span></div>\n' +
                  '            </div>\n' +
                  '          </a>\n' +
                  '        </li>')
        }
      }else{
        st = 0;
      }
    });
  }




  function setSort(stype,obj){
    var nowSort = '';
    if (stype=='normal'){
        nowSort = 'normal';
        $(".sort-item").removeClass("SortAscCss SortDescCss");
        $(obj).addClass("NormalCss");
    }else if(stype=='price'){
      if (!$(obj).hasClass('SortAscCss')){
        nowSort = 'price_asc';
        $(".sort-item").removeClass("SortAscCss SortDescCss NormalCss");
        $(obj).removeClass('SortDescCss');
        $(obj).addClass('SortAscCss');
      }else {
        nowSort = 'price_desc';
        $(".sort-item").removeClass("SortAscCss SortDescCss NormalCss");
        $(obj).removeClass('SortAscCss');
        $(obj).addClass('SortDescCss');
      }

    }else if(stype=='sale'){

      if (!$(obj).hasClass('SortAscCss')){
        nowSort = 'sale_asc';
        $(".sort-item").removeClass("SortAscCss SortDescCss NormalCss");
        $(obj).removeClass('SortDescCss');
        $(obj).addClass('SortAscCss');
      }else {
        nowSort = 'sale_desc';
        $(".sort-item").removeClass("SortAscCss SortDescCss NormalCss");
        $(obj).removeClass('SortAscCss');
        $(obj).addClass('SortDescCss');
      }
    }
    if (sort==nowSort){
      return ;
    }
    sort = nowSort;
    cpage = 1;
    st =1;
    $(".wy-pro-list").empty();
    scrollTo(0,0);
    load_data();
  }

  $("#searchCancel").on('click',function () {
    $("#searchInput").val('')
    cpage = 1;
    st =1;
    $(".wy-pro-list").empty();
    load_data();
  });

  $(".to_top").on('click',function (e) {
    scrollTo(0,0);
  })


  // 滚动加载
  var loading = false;

  // 滚动加载
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (scrollTop>700){
      $(".to_top").show()
    }else {
      $(".to_top").hide()
    }
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {
      cpage++;
      load_data();
    }
  });

  //点击的时候存储一下数据
  $(".wy-pro-list").on('click','.goods-item',function () {

    var status = {
      cpage: cpage,
      st: st,
      category_id: category_id,
      sort: sort,
      keyword: $("#searchInput").val(),
      scrollTop: $(window).scrollTop(),//当前滚动位置
      data:$(".wy-pro-list").html(),
    }

    sessionStorage.setItem('key_status_goods_list', JSON.stringify(status));
  })

  //初始化页面检查：
  load_data()
  /*var gstatus = sessionStorage.getItem('key_status_goods_list');
  if (gstatus){
    console.log(gstatus)
    gstatus = JSON.parse(gstatus);
    st = gstatus.st;
    category_id = gstatus.category_id;
    keyword = gstatus.keyword;
    sort = gstatus.sort;
    cpage = gstatus.cpage;

    var offset =  gstatus.scrollTop;
    //旧数据还原
    $(".wy-pro-list").html(gstatus.data).scrollTop(offset);
    //加载新的数据
    load_data()
  }else {
    //从零开始咯
    $(".wy-pro-list").empty()
    load_data()
  }*/


</script>
</body>
</html>
